import React, { useState } from 'react'
import { Row, Col, Input, Radio, Button, Space, Popover } from 'antd'
import { SketchPicker } from 'react-color';
import UploadImage from '@/components/UploadImage';
import './index.less'
import { backgroundObj } from '@/utils/utils';
const All = (props) => {
    const { data, setData, edit } = props
    const { title, backgroundType, fontColor, backgroundRepeat, backgroundColor, backgroundImage, allColor, list = [] } = data
    const [visible, setVisible] = useState(false)
    console.log(data, '111')
    return <Row gutter={[12, 24]}>
        <Col className='editor-content-item-label'
            span={24}>
            页面名称
        </Col>
        <Col span={24}>
            <Input value={title} showCount maxLength={20} onChange={(e) => {
                edit({
                    title: e.target.value
                })
            }}>
            </Input>
        </Col>
        <Col className='editor-content-item-label'
            span={24}>
            页面背景
        </Col>
        <Col span={24}>
            <Radio.Group onChange={(e) => {
                edit({
                    backgroundType: e.target.value
                })
            }} value={backgroundType}>
                <Radio value={'color'}>颜色</Radio>
                <Radio value={'image'}>图片</Radio>
            </Radio.Group>
        </Col>
        {backgroundType === 'color' ? <Col span={24}>
            <div className='editor-set-color'>
                <div className='design-editor-content-item-label'>
                    自定义颜色
                </div>
                <div className='design-editor-link'>
                    <Space>
                        {/* <SketchPicker color={backgroundColor}
                            onChangeComplete={(e) => {
                                edit({
                                    backgroundColor: e
                                })

                            }}></SketchPicker> */}
                        <Button type='link'>重置</Button>
                        <Popover content={<SketchPicker
                            color={backgroundColor}
                            onChange={(e) => {
                                edit({
                                    backgroundColor: e.hex
                                })

                            }}></SketchPicker>} trigger={['click']} placement={'bottom'}>
                            <div className='design-color-set'>

                                <div style={{ background: backgroundColor }} className='design-color-block '></div>
                            </div>
                        </Popover>

                    </Space>
                </div>
            </div>
        </Col> : <Col span={24}>
            <div className='editor-set-color' onClick={(e) => {
                setVisible({
                    show: true,
                })
            }}>
                {backgroundImage ? <div style={backgroundObj(backgroundImage)} className='editor-set-uploadBlock'>

                </div> : <div className='editor-set-uploadBlock'>
                    <div className='editor-set-upload'>
                        <i className='icon-jia'></i>
                    </div>
                </div>}


            </div>
            <div className='upload-text'>背景图跟随页面滚动</div>
            <div className='upload-text'>建议背景图比例与内容区宽高比例一致</div>
        </Col>}
        {backgroundType === 'image' && <>
            <Col className='editor-content-item-label'
                span={24}>
                背景显示
            </Col>

            <Col span={24}>
                <Radio.Group onChange={(e) => {
                    edit({
                        backgroundRepeat: e.target.value
                    })
                }} value={backgroundRepeat}>
                    <Radio value={'repeat'}>平铺</Radio>
                    <Radio value={'no-repeat'}>不平铺</Radio>
                </Radio.Group>
            </Col>
        </>}
        <Col className='editor-content-item-label'
            span={24}>
            统一配色
        </Col>
        <div className='design-editor-link'>
            <Space>
                {/* <SketchPicker color={backgroundColor}
                            onChangeComplete={(e) => {
                                edit({
                                    backgroundColor: e
                                })

                            }}></SketchPicker> */}
                <Popover content={<SketchPicker
                    color={allColor}
                    onChange={(e) => {
                        edit({
                            allColor: e.hex,
                            list: list.map(val => {
                                const { backgroundColor } = val
                                if (backgroundColor) {
                                    return {
                                        ...val,
                                        backgroundColor: e.hex,
                                    }
                                } else {
                                    return val
                                }
                            })
                        })

                    }}></SketchPicker>} trigger={['click']} placement={'bottom'}>
                    <div className='design-color-set'>

                        <div style={{ background: allColor }} className='design-color-block'></div>
                    </div>
                </Popover>

            </Space>
        </div>
        <Col className='editor-content-item-label'
            span={24}>
            文字颜色
        </Col>

        <Col span={24}>
            <Radio.Group onChange={(e) => {
                edit({
                    fontColor: e.target.value
                })
            }} value={fontColor}>
                <Radio value={'black'}>黑色</Radio>
                <Radio value={'white'}>白色</Radio>
            </Radio.Group>
        </Col>
        <UploadImage handleImage={(e) => {
            if (e) {
                const { src } = e
                edit({
                    backgroundImage: src
                })
            }
        }} visible={visible} onClose={() => { setVisible(false) }}></UploadImage>
    </Row>
}
export default All
